<tm-loading-retry [shouldShowRetry]="hasCourseLoadingFailed" [message]="'Failed to load course'" (retryEvent)="loadCourseInfo()">
  <div *tmIsLoading="isCourseLoading">
  <tm-course-edit-form
    [formMode]="CourseEditFormMode.EDIT"
    [(formModel)]="courseFormModel"
    [resetFormEvent]="resetCourseFormEvent"
    (deleteCourseEvent)="deleteCourse()"
    (updateCourseEvent)="onSaveCourse()"
  ></tm-course-edit-form>
  </div>
</tm-loading-retry>
<tm-loading-retry [shouldShowRetry]="hasInstructorsLoadingFailed" [message]="'Failed to load instructors of course'" (retryEvent)="loadCourseInstructors()">
  <div class="right top-padded">
    <a class="small" tmRouterLink="/web/instructor/help" [queryParams]="{questionId: CoursesSectionQuestions.COURSE_INSTRUCTOR_ACCESS, section: Sections.courses}" rel="noopener noreferrer" target="_blank">
      <i class="fa fa-info-circle" aria-hidden="true"></i>
      More about configuring access permissions
    </a>
  </div>
  <div *tmIsLoading="isInstructorsLoading">
    <ng-container *ngFor="let panelDetail of instructorDetailPanels; let i = index">
      <tm-instructor-edit-panel
          [editMode]="EditMode.EDIT" [(instructor)]="panelDetail.editPanel" [instructorIndex]="i"
          [currInstructorCoursePrivilege]="currInstructorCoursePrivilege"
          (viewRolePrivilegeModel)="viewRolePrivilegeModel($event)"
          (deleteInstructor)="deleteInstructor(i)"
          (saveInstructor)="saveInstructor(i)"
          (cancelEditing)="cancelEditingInstructor(i)"
          (sendRemindJoinEmail)="resendReminderEmail(i)"
          [allSections]="this.allSections" [allSessions]="this.allSessions">
      </tm-instructor-edit-panel>
      <br/>
    </ng-container>
  </div>
</tm-loading-retry>
<div class="card-body text-center" *ngIf="!isAddingNewInstructor">
  <button id="btn-add-instructor" class="btn btn-success mx-2 my-1" type="button" (click)="isAddingNewInstructor = true" [disabled]="isCopyingInstructor">
    Add New Instructor
  </button>
  <button id="btn-copy-instructor" class="btn btn-info mx-2 my-1" type="button" (click)="copyInstructors()" [disabled]="!this.currInstructorCoursePrivilege.canModifyInstructor || isCopyingInstructor">
    <tm-ajax-loading *ngIf="isCopyingInstructor"></tm-ajax-loading>Copy Instructors from Other Courses
  </button>
</div>
<div *ngIf="isAddingNewInstructor" @collapseAnim>
  <tm-instructor-edit-panel [editMode]="EditMode.ADD" [(instructor)]="newInstructorPanel" [instructorIndex]="instructorDetailPanels.length"
                            [isSavingNewInstructor]="isSavingNewInstructor"
                            [currInstructorCoursePrivilege]="currInstructorCoursePrivilege"
                            (viewRolePrivilegeModel)="viewRolePrivilegeModel($event)"
                            (saveInstructor)="addNewInstructor()" (cancelEditing)="isAddingNewInstructor = false;"
                            [allSections]="this.allSections" [allSessions]="this.allSessions"></tm-instructor-edit-panel>
</div>
